<template>
  <div
    ref="virtualListScrollTargetRef"
    class="scroll"
    style="max-height: 230px"
  >
    <div class="q-pa-md bg-purple text-white">
      Above the list - scrolls with the list
    </div>

    <t-virtual-scroll
      :scroll-target="scrollTarget"
      :items="heavyList"
      separator
      v-slot="{ item, index }"
    >
      <t-item :key="index" dense>
        <t-item-section>
          <t-item-label> #{{ index }} - {{ item.label }} </t-item-label>
        </t-item-section>
      </t-item>
    </t-virtual-scroll>

    <div class="q-pa-md bg-purple text-white">
      Below the list - scrolls with the list
    </div>
  </div>
</template>

<script>
  import { onMounted, ref } from 'vue';

  const maxSize = 10000;
  const heavyList = [];

  for (let i = 0; i < maxSize; i++) {
    heavyList.push({
      label: 'Option ' + (i + 1),
    });
  }

  Object.freeze(heavyList);

  export default {
    setup() {
      const virtualListScrollTargetRef = ref(null);
      const scrollTarget = ref(null);

      onMounted(() => {
        scrollTarget.value = virtualListScrollTargetRef.value;
      });

      return {
        heavyList,
        virtualListScrollTargetRef,
        scrollTarget,
      };
    },
  };
</script>
